<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>达达微博 · 猫咪版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* 背景图片使用猫咪插画风格 */
        body {
            margin: 0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-image: url('https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #333;
        }

        /* 半透明遮罩层 */
        .overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: -1;
        }

        /* 导航栏样式 */
        .navbar-custom {
            background-color: #ffe6e6;
            border-bottom: 2px solid #fcd5ce;
        }

        /* 微博卡片样式 */
        .card {
            border: none;
            border-radius: 1rem;
            background-color: #fff9f0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .card:hover {
            transform: translateY(-5px);
            transition: all 0.3s ease-in-out;
        }

        .btn-custom {
            border-radius: 20px;
            padding: 0.3rem 1rem;
        }

        /* 页脚样式 */
        footer {
            background-color: #ffe6e6;
            text-align: center;
            padding: 1rem;
            margin-top: 2rem;
            font-style: italic;
        }
    </style>
</head>
<body>

<!-- 遮罩层 -->
<div class="overlay"></div>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-custom shadow-sm mb-4">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="#">
            <i class="fas fa-cat me-2" style="color: #ff9999;"></i> 达达微博
        </a>
    </div>
</nav>

<!-- 主体内容 -->
<div class="container mt-4">
    <h1 class="text-center mb-4 display-5">🐱 欢迎来到猫咪世界~</h1>

    <!-- 登录状态区域 -->
    <div v-if="isLogin" class="d-flex justify-content-end gap-3 mb-4">
        <span class="user-info fs-5">欢迎 <strong class="text-danger">{{user.nickname}}</strong> 回来！</span>
        <a href="/insert.html" class="btn btn-primary btn-custom">发微博</a>
        <a href="javascript:void(0)" @click="logout()" class="btn btn-outline-secondary btn-custom">退出登录</a>
    </div>
    <div v-else class="d-flex justify-content-end gap-3 mb-4">
        <a href="/reg.html" class="btn btn-success btn-custom">注册</a>
        <a href="/login.html" class="btn btn-info btn-custom text-white">登录</a>
    </div>

    <hr class="mb-5">

    <!-- 微博列表 -->
    <div class="row g-4">
        <div class="col-md-8 offset-md-2" v-for="w in arr">
            <div class="card p-3">
                <div class="d-flex align-items-center mb-2">
                    <i class="fas fa-cat me-2" style="font-size: 1.2rem; color: #ff9999;"></i>
                    <h5 class="mb-0">
                        <a :href="'/detail.html?id='+w.id" class="text-decoration-none text-dark">
                            <span style="color:darkred">{{w.nickname}}</span>: {{w.content}}
                        </a>
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    &copy; 2025 达达微博 · 猫咪特别版 ❤️
</footer>

<!-- 引入 axios 和 Vue 框架 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: ".container",
        data: {
            isLogin: false,
            user: {},
            arr: []
        },
        methods: {
            logout() {
                axios.get("/v1/users/logout").then(function (response) {
                    v.isLogin = false;
                });
            }
        },
        created: function () {
            // 获取当前登录用户
            axios.get("/v1/users/currentUser").then(function (response) {
                v.user = response.data;
                v.isLogin = response.data !== "";
            });

            // 获取微博列表
            axios.get("/v1/weibo/selectIndex").then(function (response) {
                v.arr = response.data;
            });
        }
    });
</script>

</body>
</html>